<template>
  <div class="app-container">
    <search-form
      v-show="showSearch"
      :data="queryParams"
      :field-list="filterInfo.fieldList"
      :list-type-info="filterInfo.dictList"
      @handleSearch="handleQuery"
      @handleReset="resetQuery" />
    <!--    <el-row :gutter="10" class="mb8">
          操作日志删除  v-hasPermi="['monitor:operlog:remove']"
      <el-col :span="1.5">
        <el-button
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
        >删除
        </el-button>
      </el-col>
            <el-col :span="1.5">
              <el-button
                icon="el-icon-download"
                size="mini"
                @click="handleExport"
                v-hasPermi="['monitor:operlog:export']"
              >导出</el-button>
            </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>-->
    <hk-table
      ref="tables"
      :loading="loading"
      :tableData="list"
      :tableColumns="tableFieldList"
      :total="total"
      :selection="false"
      :showPag="true"
      :operate="true"
      :show-index="true"
      :table-height="80"
      :queryParams="queryParams"
      :default-sort="defaultSort"
      @changePage="changePage"
      @handleSelectionChange="handleSelectionChange">
      <template #logType="scope">
        <el-tag type="info">{{ scope.row.logType == 0 ? '成功' : '失败' }}</el-tag>
      </template>
      <!--    操作状态   -->
      <template #status="scope">
        <span class="Inspan" :class="scope.row.status == '0' ? 'simple' : 'serious'">{{
          scope.row.status == '0' ? '成功' : '失败'
        }}</span>
      </template>
      <template #operate="scope">
        <!--     v-hasPermi="['monitor:operlog:query']"    -->
        <el-button size="mini" type="text" @click="handleView(scope.row, scope.index)">详情</el-button>
      </template>
    </hk-table>

    <!-- 操作日志详细 -->
    <details-dialog ref="detailsDialogRef" :form-data="form" />
  </div>
</template>

<script>
import { list, delOperlog, cleanOperlog } from '@/api/system/operlog'
import HkTable from '@/components/HKTable'
import detailsDialog from './detail'
import SearchForm from '@/components/HKSearchform/index.vue'
import { parseTime } from '@/utils/hongke'

export default {
  name: 'Operlog',
  components: { HkTable, detailsDialog, SearchForm },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      // 是否显示弹出层
      open: false,
      // 日期范围
      dateRange: [],
      // 默认排序
      defaultSort: { prop: 'operTime', order: 'descending' },
      // 表单参数
      form: {},
      // 搜索项配置
      filterInfo: {
        fieldList: [
          { label: '系统模块', field: 'module', type: 'input' },
          { label: '操作人员', field: 'createBy', type: 'input' },
          // { label: '类型', field: 'logType', type: 'select', list: 'logTypeList' },
          { label: '状态', field: 'status', type: 'select', list: 'statusList' },
          { label: '操作时间', field: 'dateRange', type: 'dateRange' },
        ],
        dictList: {
          logTypeList: [],
          statusList: [
            {
              value: 0,
              label: '成功',
            },
            {
              value: 1,
              label: '失败',
            },
          ],
        },
      },
      tableFieldList: [
        { label: '日志编号', param: 'id' },
        { label: '系统模块', param: 'module' },
        // { label: '请求方式', param: 'reqType' },
        { label: '操作人员', param: 'createBy' },
        { label: '操作地址', param: 'reqIp' },
        { label: '操作状态', param: 'status', type: 'slot' },
        { label: '操作内容', param: 'logInfo', width: 300, align: 'left' },
        { label: '操作日期', param: 'createDate' },
      ],
      // 查询参数
      queryParams: {
        isLogin: '1',
        current: 1,
        size: 10,
        module: undefined,
        createBy: undefined,
        logType: undefined,
        status: undefined,
        dateRange: undefined,
        startTime: undefined,
        endTime: undefined,
      },
    }
  },
  created() {
    // this.filterInfo.dictList.logTypeList = this.dict.type.operlog_status
    // this.filterInfo.dictList.statusList = this.dict.type.sys_operlog_status
    this.getList()
  },
  methods: {
    /** 分页 */
    changePage(data) {
      this.queryParams.current = data.current
      this.queryParams.size = data.size
      this.getList()
    },
    /** 查询登录日志 */
    getList() {
      this.loading = true
      list(this.queryParams).then((response) => {
        this.list = response.list
        this.total = response.total
        this.loading = false
      })
    },

    /** 搜索按钮操作 */
    handleQuery(data) {
      if (data) {
        this.queryParams = {
          current: 1,
          size: data.size || 10,
          isLogin: '1',
          module: data.module || undefined,
          createBy: data.createBy || undefined,
          logType: data.logType || undefined,
          status: data.status || undefined,
          startTime: data.dateRange ? parseTime(data.dateRange[0], '{y}-{m}-{d} {h}:{i}:{s}') : undefined,
          endTime: data.dateRange ? parseTime(data.dateRange[1], '{y}-{m}-{d} {h}:{i}:{s}') : undefined,
        }
      } else {
        this.queryParams = {
          current: 1,
          size: 10,
        }
      }

      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.handleQuery()
    },
    /** 多选框选中数据 */
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id)
      this.multiple = !selection.length
    },
    /** 排序触发事件 */
    handleSortChange(column, prop, order) {
      this.queryParams.orderByColumn = column.prop
      this.queryParams.isAsc = column.order
      this.getList()
    },
    /** 详细按钮操作 */
    handleView(row) {
      this.form = row
      this.$refs.detailsDialogRef.open = true
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const operIds = row.id || this.ids
      this.$modal
        .confirm('是否确认删除日志编号为"' + operIds + '"的数据项？')
        .then(function () {
          return delOperlog(operIds)
        })
        .then(() => {
          this.getList()
          this.$modal.msgSuccess('删除成功')
        })
        .catch(() => {})
    },
    /** 清空按钮操作 */
    handleClean() {
      this.$modal
        .confirm('是否确认清空所有操作日志数据项？')
        .then(function () {
          return cleanOperlog()
        })
        .then(() => {
          this.getList()
          this.$modal.msgSuccess('清空成功')
        })
        .catch(() => {})
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        'monitor/operlog/export',
        {
          ...this.queryParams,
        },
        `operlog_${new Date().getTime()}.xlsx`
      )
    },
  },
}
</script>
<style scoped lang="scss">
::v-deep .el-table {
  margin-top: 0 !important;
}
.app-container{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .targetTable{
    flex:1
  }
}
</style>
